<script setup>
import { ref } from 'vue'

let highlightRef = ref('')
const props = defineProps(['content', 'fileName'])

const handleSaveFile = async () => {
  const content = highlightRef.value.$el.textContent
  const fileHandle = await window.showSaveFilePicker()
  const writableStream = await fileHandle.createWritable()
  await writableStream.write(content)
  await writableStream.close()
}
</script>
<template>
  <div class="container">
    <div v-show="props.content">
      <div class="title-box">
        <h4 class="title">{{ fileName }}</h4>
        <el-button size="small" type="primary" @click="handleSaveFile">保存文件</el-button>
      </div>
      <highlightjs ref="highlightRef" autodetect contenteditable="true" :code="props.content" />
    </div>
  </div>
</template>
<style scoped>
.container {
  height: 100vh;
  overflow: auto;
}
.title-box {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.title-box .title {
  flex: 1;
}
.container::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}

.container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.container::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
